<template>
  <div>
    <van-tabs @click="onClick" color="#1f1f1f">
      <van-tab title="推荐">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad2"
          >
            <div
              class="item"
              v-for="item in list2"
              :key="item.id"
              @click="$router.push({ path: '/Detail?id=' + item.id })"
            >
              <div class="top">
                <img :src="item.avatar" alt="" />
                <div class="right">
                  <div class="title">{{ item.stem }}</div>
                  <div class="username">
                    <span>{{ item.creator }}</span>
                    <span>|</span>
                    <span>{{ item.createdAt }}</span>
                  </div>
                </div>
              </div>
              <div class="middle">
                {{ item.content }}
              </div>
              <div class="bottom">
                <span>点赞 {{ item.likeCount }}</span>
                <span>|</span>
                <span>浏览 {{ item.views }}</span>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>

      <van-tab title="最新">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="item" v-for="item in list" :key="item.id">
              <div class="top">
                <img :src="item.avatar" alt="" />
                <div class="right">
                  <div class="title">{{ item.stem }}</div>
                  <div class="username">
                    <span>{{ item.creator }}</span>
                    <span>|</span>
                    <span>{{ item.createdAt }}</span>
                  </div>
                </div>
              </div>
              <div class="middle">
                {{ item.content }}
              </div>
              <div class="bottom">
                <span>点赞 {{ item.likeCount }}</span>
                <span>|</span>
                <span>浏览 {{ item.views }}</span>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";

export default {
  data() {
    return {
      list: [],
      list2: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 0,
      page2: 0,
    };
  },
  methods: {
    onClick(name, title) {
      console.log(name, title);
      Toast(title);
    },

    //最新
    onLoad() {
      setTimeout(async () => {
        if (this.refreshing) {
          this.list = [];

          //   this.refreshing = false;
        }
        // for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        this.page++;
        const res = await axios({
          method: "get",
          url: `http://interview-api-t.itheima.net/h5/interview/query?current=${this.page}&pageSize=10`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
        });
        this.list.push(...res.data.data.rows);
        this.refreshing = false;
        this.loading = false;
        if (this.list.length >= 400) {
          this.finished = true;
        }
      }, 1000);
    },
    onLoad2() {
      setTimeout(async () => {
        if (this.refreshing) {
          this.list2 = [];
        }
        // for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        this.page2++;
        const res = await axios({
          method: "get",
          url: `http://interview-api-t.itheima.net/h5/interview/query?current=${this.page2}&pageSize=10&sorter=weight_desc`,
          headers: {
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
        });
        // console.log(res);
        this.list2.push(...(res.data?.data?.rows || []));
        this.refreshing = false;
        this.loading = false;
        if (this.list2.length >= 400) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.page = 0;
      this.page2 = 0;
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
      this.onLoad2();
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  padding: 10px;
  border: 1px solid #000;
  .top {
    display: flex;

    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    .right {
      flex: 1;
    }
  }
}
// 超过两行显示省略号
.middle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
